<template>
	<view class="page-content">
		<custom-navbar pageTitle="项目列表">
			<template v-slot:searchForm>
				<view class="searchMain">
					<view class="searchInput">
						<up-input placeholder="请输入内容" border="none" prefixIcon="search"
							:customStyle="{ backgroundColor: '#fff', height: '70rpx', paddingLeft: '10px' }"
							v-model="params.projectName" @change="change"></up-input>
					</view>
					<view class="selectList">
						<view class="zlcSelect">
							<zlc-select v-model="params.createDateSearch" label="月份"
								:showOptionsLabel="!!params.createDateSearch" :options="searchMonthList_data"
								keyName="dictValue" labelName="dictLabel" @change="getList('reload')">

							</zlc-select>
						</view>
						<view class="zlcSelect">
							<zlc-select v-model="params.enterpriseId" label="企业"
								:showOptionsLabel="!!params.enterpriseId" :options="userList_data" keyName="value"
								labelName="text" @change="getList('reload')">

							</zlc-select>
						</view>
						<view class="zlcSelect">
							<zlc-select v-model="params.deptId" label="对接公司"
								:showOptionsLabel="!!params.deptId" :options="deptList_data" keyName="deptId"
								labelName="deptName" @change="getList('reload')">

							</zlc-select>
						</view>
						<view class="zlcSelect">
							<zlc-select v-model="params.intentionLevel" label="意向度"
								:showOptionsLabel="!!params.intentionLevel" :options="intentionLevelList_data"
								keyName="dictValue" labelName="dictLabel" @change="getList('reload')">

							</zlc-select>
						</view>
					</view>
				</view>
			</template>
		</custom-navbar>
		<view class="list">
			<scroll-view class="scroll-view_H" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
				@scrolltolower="loadMore" @refresherrefresh="refresherrefresh">
				<view class="item" v-for="(item, index) in listData" :key="item.projectId">
					<custom-card :projectData="item" :contactTitleList="contactTitleList_data" :deptList="deptList_data"
						:visit_cooperation_List="visit_cooperation_List_data"></custom-card>
				</view>
			</scroll-view>
		</view>


		<!-- 悬浮球 -->
		<movable-area class="movable-area" :style="{ 'height': `calc(100% - 500rpx)` }" v-if="hasPermission('miniapp:project:add')">
			<movable-view class="movable-view" :x="10000" :y="200" direction="vertical">
				<view class="main">
					<view class="iconBox" @click="linkToAddPage">
						<img src="@/static/common/projectIcon.png" alt="" class="icon"/>
					</view>
				</view>
			</movable-view>
		</movable-area>
		
		<custom-tabbar> </custom-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from "vue"
	import { onShow } from "@dcloudio/uni-app";
	import { debounce } from 'uview-plus';
	//api
	import { routers } from "@/api/app/index"
	//组件
	import customTabbar from "@/components/customTabbar/index.vue"
	import zlcSelect from "@/components/zlcSelect/index.vue"
	import customNavbar from "@/components/customNavbar/index.vue"
	import customCard from "./components/customCard/index.vue"
	//hooks
	import useViewModel from './hooks/useViewModel'
	const { params, getList, listData, loadMore, refresherrefresh, triggered } = useViewModel()
	import useDataList from "@/appHooks/useDataList"
	import useAppHookds from "@/appHooks/useViewModel"
	let {
		getDeptList,
		deptList_data,
		getContactTitleList,
		contactTitleList_data,
		getSearchMonthList,
		searchMonthList_data,
		getIntentionLevelList,
		intentionLevelList_data,
		getVisit_cooperation_List,
		visit_cooperation_List_data,
		hasPermission
	} = useAppHookds()
	
	let {
		getUserList,
		userList_data
	} = useDataList()
	
	//路由
	let routersArr = ref<Router[]>([])

	//输入框输入事件
	let change = (e : string) => {
		debounce(() => { params.value.projectName = e, getList('reload') }, 800)
	}

	//前往新增项目页面
	let linkToAddPage = () : void => {
		uni.navigateTo({
			url: '/pages/addProject/index'
		})
	}
	
	
	

	onMounted(() => {
		getContactTitleList()
		getDeptList()
		getSearchMonthList()
		getIntentionLevelList()
		getVisit_cooperation_List()
		getUserList()
		
	})
	
	onShow(() => {
		getList('reload')
	})
</script>

<style lang="scss" scoped>
	.page-content {
		// width: 100%;
		// height: 100%;
		padding-top: 360rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: #f6f6f8;
		width: 100%;
		height: calc(100% - 140rpx);
		box-sizing: border-box;
		overflow: hidden;

		.searchMain {
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.selectList {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.zlcSelect {
					width: 25%;
				}
			}
		}

		.list {
			height: 100%;

			.scroll-view_H {
				height: 100%;
			}
		}

		.movable-area {
			width: 100%;
			position: fixed;
			pointer-events: none;
			top: 360rpx;

			.movable-view {
				width: fit-content;
				height: fit-content;
				pointer-events: auto;

				.main {
					background: #fff;
					border-radius: 50%;
					overflow: hidden;

					.iconBox {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-evenly;
						border-radius: 50%;
						overflow: hidden;

						.icon {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

			}
		}
	}
</style>